<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="taglib.jsp" %>
<c:set var="AdminLTE" value="${res}AdminLTE/"/>
<c:set var="bsgrid" value="${res}bsgrid/"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理</title>
    <script type="text/javascript">var ctx = '${ctx}';</script>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="${AdminLTE}bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${AdminLTE}plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${AdminLTE}plugins/ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${AdminLTE}dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="${AdminLTE}dist/css/skins/skin-blue-light.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="${AdminLTE}plugins/html5shiv.js"></script>
        <script src="${AdminLTE}plugins/respond.min.js"></script>
    <![endif]-->
    <script src="${AdminLTE}plugins/jQuery/jquery.min.js"></script>
    
    <script src="${res}js/common.js" type="text/javascript"></script>
    <!-- datepicker -->
    <script src="${res}My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <!-- validate -->
	<script src="${res}jqueryValidate/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${res}jqueryValidate/localization/messages_zh.min.js" type="text/javascript"></script>
    <!-- dialog -->
	<link rel="stylesheet" href="${res}artDialog/css/ui-dialog.css">
	<script src="${res}artDialog/dist/dialog-plus-min.js"></script>
	<!-- bsgrid -->
	<link rel="stylesheet" href="${bsgrid}merged/bsgrid.all.min.css"/>
	<link rel="stylesheet" href="${bsgrid}css/skins/grid_easyui.min.css"/>
    <script type="text/javascript" src="${bsgrid}js/lang/grid.zh-CN.min.js"></script>
    <script type="text/javascript" src="${bsgrid}merged/bsgrid.all.min.js"></script>
  
  </head>
  <body class="hold-transition skin-blue-light sidebar-mini">
    <div class="wrapper">

      <!-- Main Header -->
      <header class="main-header">

        <!-- Logo -->
        <a href="#" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"></span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg">后台管理</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li>
                <a href="signIn.jsp"><i class="fa fa-share"></i>退出</a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
              <div>你好,<span>admin</span></div>
          </div>
          <!-- Sidebar Menu -->
          <ul class="sidebar-menu">
            <!-- Optionally, you can add icons to the links -->
            <li><a href="#"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>
            <li class="treeview active">
              <a href="#"><i class="fa fa-link"></i> <span>基础管理</span> <i class="fa fa-angle-left pull-right"></i></a>
              <ul class="treeview-menu">
                <li class="active"><a href="#"><i class="fa fa-circle-o"></i> 订单管理</a></li>
              </ul>
            </li>
          </ul><!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>订单管理
<!--           	<small>管理您的订单</small> -->
          </h1>
        </section>

        <!-- Main content -->
        <section class="content">

          <!-- Your Page Content Here -->
          <div class="box box-default">
               <div class="box-body">
                 <!-- form start -->
                 <form id="schFrm" class="form-inline" onsubmit="return false;">
					订单号:<input name="orderIdSch" class="form-control" type="text" value="">
					手机号:<input name="mobileSch" class="form-control" type="text" value="">
					地址:<input name="addressSch" class="form-control" type="text" value="">
					<button id="schBtn" type="submit" class="btn btn-primary"><i class="icon-search"></i>查询</button>
					<button type="reset" class="btn">清空</button>
				</form>
               </div><!-- /.box-body -->
           </div>
           
          <div class="box">
				<div class="box-header">
					 <div class="btn-group">
			         	<a id="addBtn" class="btn btn-primary">
			            	<i class="fa fa-plus"></i> 新增订单 
			         	</a>
			          </div>
				</div><!-- /.box-header -->
			
				<div class="box-body">	 
					<table id="searchTable">
				        <tr>
				            <th w_index="orderId" w_sort="order_id,desc" width="6%;">订单号</th>
				            <th w_index="cityName" width="5%;">城市名</th>
				            <th w_index="mobile" w_align="left" width="15%;">手机号</th>
				            <th w_index="address" w_align="left" width="30%;">地址</th>
				            <th w_index="createDate" w_sort="create_date" width="15%;">下单时间</th>
				            <th w_render="operate" width="10%;">操作</th>
				        </tr>
				    </table>
				</div><!-- /.box-body -->
			</div>
		    
		    <div id="crudWin">
			    	<form id="crudFrm" class="form-horizontal">
			    		<div class="form-group">
	                      <label class="col-sm-3 control-label">城市名</label>
	                      <div class="col-sm-7">
	                        <input type="text" class="form-control required" name="cityName">
	                      </div>
	                    </div>
			    		<div class="form-group">
	                      <label class="col-sm-3 control-label">手机号</label>
	                      <div class="col-sm-7">
	                        <input type="text" class="form-control required" name="mobile">
	                      </div>
	                    </div>
			    		<div class="form-group">
	                      <label class="col-sm-3 control-label">联系地址</label>
	                      <div class="col-sm-7">
	                        <input type="text" class="form-control" name="address">
	                      </div>
	                    </div>
			    		<div class="form-group">
	                      <label class="col-sm-3 control-label">创建时间</label>
	                      <div class="col-sm-7">
	                        <input type="text" onClick="WdatePicker()" class="form-control required" name="createDate">
	                      </div>
	                    </div>
					</form>
			    </div>
		    
		    <script type="text/javascript">
        var that = this;
        
        var pk = 'orderId'; // java类中的主键字段
    	var listUrl = ctx + 'listBsgridOrderInfo.do'; // 查询
    	var addUrl = ctx + 'addBsgridOrderInfo.do'; // 添加
    	var updateUrl = ctx + 'updateBsgridOrderInfo.do'; // 修改
    	var delUrl = ctx + 'delBsgridOrderInfo.do'; // 删除
    	var submitUrl = ''; // 提交URL

    	var gridObj; // 表格
    	var crudWin; // 窗口
    	var $schFrm = $('#schFrm'); // 查询表单
    	var $crudFrm = $('#crudFrm'); // 编辑表单

    	var $schBtn = $('#schBtn'); // 查询按钮
    	var $addBtn = $('#addBtn'); // 添加按钮
    	
    	var validator; // 验证器
    	
    	function reset() {
    		$crudFrm.get(0).reset();
    		validator.resetForm();
    	}
    	
    	
    	// 初始化事件
    	$addBtn.click(function() {
    		submitUrl = addUrl;
    		reset();
    		crudWin.title('添加');
    		crudWin.show()
    	});
    	
    	$schBtn.click(function() {
    		search();
    	});
    	
        gridObj = $.fn.bsgrid.init('searchTable', {
            url: listUrl
            ,pageSizeSelect: true
            ,rowHoverColor: true
            ,rowSelectedColor: false
            ,pageSize: 10
        });
    	
        crudWin = dialog({
    	    title: '编辑',
    	    width:480,
    	    content: document.getElementById('crudWin'),
    	    okValue: '保存',
    	    ok: function () {
    	    	that.save();
    	    	return false;
    	    },
    	    cancelValue: '取消',
    	    cancel: function () {
    	    	this.close();
    	    	return false;
    	    }
    	});
    	
        function search(){
        	gridObj.options.otherParames = getFormData($schFrm);
        	gridObj.refreshPage();
    	}

        function operate(row, rowIndex, colIndex, options) {
        	return '<a href="#" onclick="'
				+ FunUtil.createFun(that, 'edit', row)
				+ ' return false;">修改</a>'
				+ '&nbsp;&nbsp;'
				+ '<a href="#" onclick="'
				+ FunUtil.createFun(that, 'del', row)
				+ ' return false;">删除</a>';
        }
        
		// 保存
    	this.save = function() {
    		var self = this;
    		var data = getFormData($crudFrm);
    		var validateVal = validator.form();
    		if(validateVal) {
	    		Action.post(submitUrl, data, function(result) {
					Action.execResult(result, function(result) {
						gridObj.refreshPage();
						crudWin.close();
					});
				});
    		}
    	}
    	 // 编辑
    	this.edit = function(row) {
    		if (row) {
    			submitUrl = updateUrl + '?' + pk + '=' + row[pk];
    			reset();
    			loadFormData($crudFrm,row);
    			crudWin.title('修改');
    			crudWin.show();
    		}
    	}
     
    	// 删除
    	this.del = function(row) {
    		if (row) {
    			var d = dialog({
    	    	    title: '提示',
    	    	    width: 200,
    	    	    content: '确定要删除该记录吗?',
    	    	    okValue: '确定',
    	    	    ok: function () {
    	    	    	Action.post(delUrl, row, function(result) {
    						Action.execResult(result, function(result) {
    							gridObj.refreshPage();
    						});
    					});
    	    	    },
    	    	    cancelValue: '取消',
    	    	    cancel: function () {}
    	    	});
    	    	d.showModal();
    		}
    	}
        
    	validator = $crudFrm.validate();
    </script>

        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

      <!-- Main Footer -->
      <footer class="main-footer">
        <!-- Default to the left -->
        <strong>Copyright &copy; 2016 durcframework.</strong> All rights reserved.
      </footer>

    </div><!-- ./wrapper -->

    <!-- REQUIRED JS SCRIPTS -->
    <!-- Bootstrap 3.3.5 -->
    <script src="${AdminLTE}bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="${AdminLTE}dist/js/app.min.js"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
         Both of these plugins are recommended to enhance the
         user experience. Slimscroll is required when using the
         fixed layout. -->
  </body>
</html>
